<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Vue中的插槽（slot）</title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="root">
		<child>
			<p>Dell</p>
		</child>
	</div>
	--------------------------------
	<div id="root_2"> 
		<body-content>
			<div slot="header">header</div>
			<div slot="footer">footer</div>
		</body-content>
	</div>
</body>
<script>
	Vue.component('child', {
		props: ['content'],
		template: '<div><p>hello</p>' +
				  '<slot>默认内容</slot>' +
				  '</div>'
	})
	
	Vue.component('body-content', {
		template: '<div>'+
				  '<slot name="header"></slot>'+
				  '<div class="content">content</div>'+
				  '<slot name="footer"></slot>'+
				  '</div>'
		})
	var vm = new Vue({
		el: '#root'
	})
	var root_2 = new Vue({
		el: "#root_2"
	})
</script>

</html>
